<template name="chitchat">
    <view class="chitchat-content">
        <!-- 内容 -->
        <block v-if="orderInfo!=''">
            <view class="shop-item" style="line-height: 45rpx;" v-for="(item,index) in orderInfo.order_goods" :key="index">
                <view class="shop-Imgs">
                    <image :src="item.sku_image" mode=""></image>
                </view>
                <view class="shop-info-text">
                    <view class="shop-text">{{item.sku_name}}</view>
                    <view class="shop-text" style="font-size:23rpx;">订单状态：{{item.delivery_status_name}}</view>
                    <view class="shop-text" style="font-size:23rpx;">配送方式：{{orderInfo.delivery_type_name}}</view>
                    <view class="shop-price">
                        <view class="shop-price-num">￥{{item.price}}</view>
                        <view class="shop-price-btns" @click="sendOrderinfo(item)">发送</view>
                    </view>
                </view>
            </view>
        </block>
        <block v-if="showTipError">
            <view class="tipCenter">
                <view class="textTipInfoisTiptxt">很高兴为您服务，请留言，我们稍后回复。</view>
                <view class="textTipInfoisTiptxt">如有急事请微信或电话联系18829917167</view>
            </view>
        </block>
        <mescroll ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" :height="sheight">
            <view class="shop-item" v-if="goods_sku_detail!=''">
                <view class="shop-Imgs">
                    <image :src="goods_sku_detail.sku_image" mode=""></image>
                </view>
                <view class="shop-info-text">
                    <view class="shop-text">{{goods_sku_detail.sku_name}}</view>
                    <view class="shop-price">
                        <view class="shop-price-num">￥{{goods_sku_detail.price}}</view>
                        <view class="shop-price-btns" @click="sendShop(goods_sku_detail)">发送</view>
                    </view>
                </view>
            </view>
            <view v-for="(item, inx) in msglist" :key="inx" style="padding-bottom:20rpx">
                <view class="chitchat-time">{{ item.create_time }}</view>

                <view class="chitchat-box" :class="item.type == 0 ? 'rightmsg' : ''">

                    <block v-if="item.type == 1">

                        <view>
                            <view class="nameStyles">{{item.username}}</view>
                            <view class="chitchat-img">
                                <image :src="staticImgUrl + 'logo.png'" mode=""></image>
                            </view>
                        </view>
                        <view class="chitchat-text" v-if="item.content_type == 0">{{item.servicer_say}}</view>

                        <view class="chitchat-text-img" v-if="item.content_type == 3" @click="seeImg(item.servicer_say)">
                            <image :src="item.servicer_say" mode=""></image>
                        </view>

                    </block>

                    <block v-else>
                        <view class="chitchat-text-Two" v-if="item.content_type == 0">{{ item.consumer_say }}</view>

                        <view class="chitchat-text-img" v-if="item.content_type == 3 && item.goods_sku_id == 0" @click="seeImg(item.consumer_say)">
                            <image :src="item.consumer_say" mode="aspectFit"></image>
                        </view>

                        <view>
                            <view class="nameStyles" v-if="item.content_type != 1 && item.goods_sku_id == 0">
                                {{item.nickname}}
                            </view>
                            <view class="chitchat-imgTwo" v-if="item.goods_sku_id == 0&&item.headimg!=''">
                                <image :src="item.headimg" mode=""></image>
                            </view>
                        </view>
                        <view class="chitchat-imgTwo" v-if="item.headimg==''&&item.goods_sku_id == 0">
                            <image :src="staticImgUrl + 'logo.png'" mode=""></image>
                        </view>
                        <view class="shop-item" v-if="item.content_type == 1 && item.goods_sku_id != 0" style="padding-right:20rpx;padding-left:20rpx;">

                            <view class="shop-Imgs" v-if="item.sku_image">
                                <image :src="item.sku_image" mode=""></image>
                            </view>

                            <view class="shop-Imgs" v-if="!item.sku_image">
                                <image :src="item.logo" mode=""></image>
                            </view>

                            <view class="shop-info-text">
                                <view class="shop-text">{{item.goods_name}}</view>
                                <view class="shop-price">
                                    <view class="shop-price-num">￥{{item.price}}</view>
                                    <view class="shop-price-btns" style="background-color: #e5e5e5;">已发送</view>
                                </view>
                            </view>
                        </view>

                        <view class="shop-item" style="line-height: 45rpx;" v-if="item.content_type == 2 && item.goods_sku_id != 0">
                            <view class="shop-Imgs">
                                <image :src="item.sku_image" mode=""></image>
                            </view>
                            <view class="shop-info-text">
                                <view class="shop-text">{{item.sku_name}}</view>
                                <view class="shop-text" style="font-size:23rpx;">订单状态：{{item.order_status_name}}</view>
                                <view class="shop-text" style="font-size:23rpx;">配送方式：{{orderInfo.delivery_type_name}}
                                </view>
                                <view class="shop-price">
                                    <view class="shop-price-num">￥{{item.price}}</view>
                                    <view class="shop-price-btns" style="background-color: #e5e5e5;">已发送</view>
                                </view>
                            </view>
                        </view>

                    </block>

                </view>
            </view>
        </mescroll>

        <!-- 底部 -->
        <view class="bottom-box" :style="{ height: mfheight + 'rpx' }">
            <view class="bottom-send-box">
                <view class="input-box">
                    <input type="text" value="" placeholder="请输入你想说的..." v-model="keyText" @confirm="clickRequest()" confirm-type="send" @focus="focus" @input="inputVal" />
                </view>
                <!-- 				<view class="face-icon">
					<image src="../../static/face.png" mode=""></image>
				</view> -->
                <view class="add-icon" @click="showMoreFn" style="margin-left: 20rpx;">
                    <image :src="staticImgUrl + 'chat/openup.png'" mode=""></image>
                </view>
                <view class="btnreq" @click="clickRequest()">发送</view>
            </view>

            <view class="morefn">
                <view class="fn-one" @click="sendImg">
                    <view class="fn-one-icon">
                        <image :src="staticImgUrl + 'chat/upimg.png'" mode=""></image>
                    </view>
                    <view class="fn-one-text">图片</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import http from '../../../common/js/http.js'
import MescrollMixin from '@/components/mescroll/mescroll-mixins.js'
import MescrollMoreItemMixin from '@/components/mescroll/mixins/mescroll-more-item.js'
import WebSocketClass from '@/common/js/websocket.js'
import {
	mapGetters
} from 'vuex'
export default {
	mixins: [MescrollMixin, MescrollMoreItemMixin],
	name: 'Chitchat',
	data() {
		return {
			showTipError: false,
			mescroll: null,
			downOption: {
				auto: true // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				auto: false, // 不自动加载
				noMoreSize: 4, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					icon: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png',
					tip: '~ 空空如也 ~' // 提示
				},
				isLock: false
			},
			msglist: [],
			scrollTop: 0,
			mfheight: 126,
			sheight: '81%',
			keyText: '',
			socketTask: null,
			// 确保websocket是打开状态
			is_open_socket: false,
			content_type: 0,
			servicer_id: 0,
			wbc: null,
			page: 0,
			resclient_id: null,
			sku_id: null,
			goods_sku_detail: '',
			shopObj: '',
			sayid: null,
			orderInfo: '',
			order_id: null
		}
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	// 属性
	props: {
		show: {
			// 返回事件判断显示
			type: Boolean,
			default: false
		},
		site_id: {
			type: Number,
			default: 0
		}
	},
	onLoad() { },
	created() { },
	mounted() {
		let options = this.$util.queryObj()

		var url = ''
		// #ifdef H5
		let proType = process.env.NODE_ENV == 'production'
		if (proType) {
			url = 'wss://xmg-shop.kanfoshan.cn/wss'
		} else {
			url = 'wss://xmgts.kanfoshan.cn/wss'
		}
		// #endif

		// #ifdef MP-WEIXIN
		let envVs = wx.getAccountInfoSync().miniProgram.envVersion // 方法一
		// 线上
		if (envVs == 'release') {
			url = 'wss://xmg-shop.kanfoshan.cn/wss'
		} else {
			// 线下
			url = 'wss://xmgts.kanfoshan.cn/wss'
		}
		// #endif

		console.log(url)

		this.wbc = new WebSocketClass(url, 0, e => {
			var type = JSON.parse(e.data).type
			var client_id = JSON.parse(e.data).data.client_id
			if (type == 'init') {
				this.getclient_id(client_id)
			} else if (type == 'string' || type == 'image') {
				var resMsg = JSON.parse(e.data).data
				this.msglist.push(resMsg)
				this.scrollToBottom()
			}
		})
		if (options.order_id != undefined) {
			// console.log("options.order_id", options.order_id)
			this.getOrderInfo(options.order_id)
			this.order_id = options.order_id
		}
		this.servicer_id = options.servicer_id
		if (options.sku_id != undefined) {
			this.getDetails(options.sku_id)
			this.sku_id = options.sku_id
		}
		// #ifdef MP-WEIXIN
		this.sheight = '81%'
		// #endif
		// #ifdef H5
		this.sheight = '86%'
		// #endif
		this.scrollToBottom()
	},
	updated() { },
	// 关闭websocket【必须在实例销毁之前关闭,否则会是underfined错误】
	beforeDestroy() {
		this.closeSocket()
	},
	methods: {
		ceshi() {
			this.$util.tip('~暂未开放敬请期待~')
			return
		},
		// 初始化
		mescrollInit(e) {
			this.mescroll = e
		},
		/* 下拉刷新的回调 */
		downCallback(page) {
			// console.log('downCallback', e)
			if (this.servicer_id) {
				this.page++
				this.dialogs(this.page, 5, this.servicer_id)
			} else {
				this.mescroll.endSuccess(1)
			}
		},
		/* 上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback() {
			this.mescroll.endErr()
		},
		getOrderInfo(order_id) {
			// console.log("order_id", order_id)
			let newObj = {
				order_id,
				app_type: 'h5',
				app_type_name: 'H5'
			}
			this.$Apis.getOrderDetail(newObj).then(res => {
				this.orderInfo = res
			})
		},
		getinfo(site_id) {
			// console.log("site_id", site_id)
			if (site_id == 0 || site_id == null) {
				return false
			}
			this.$request.shopInfo({
				site_id
			}).then(res => {
				// console.log("getinfo",res)
			}).catch(() => { })
		},
		getDetails(sku_id) {
			this.$request.goodsskuDetail({
				sku_id: Number(sku_id)
			}).then(res => {
				this.goods_sku_detail = res.data.goods_sku_detail
				this.shopObj = res.data.shop_info
				// console.log("goods_sku_detail",this.goods_sku_detail)
			})
				.catch(() => { })
		},

		showMoreFn() {
			if (this.mfheight == 126) {
				this.mfheight = 290
				// #ifdef MP-WEIXIN
				this.sheight = '72%'
				// #endif
				// #ifdef H5
				this.sheight = '76%'
				// #endif
				this.scrollToBottom()
			} else {
				this.mfheight = 126
				// #ifdef MP-WEIXIN
				this.sheight = '81%'
				// #endif
				// #ifdef H5
				this.sheight = '86%'
				// #endif
				this.scrollToBottom()
			}
		},
		// 滚动至聊天底部
		scrollToBottom() {
			this.mescroll.scrollTo(100000, 100)
		},
		getclient_id(client_id) {
			console.log('getclient_id', client_id, this.site_id)

			http.sendRequest({
				url: '/servicer/api/chat/bind', data: {
					client_id,
					site_id: this.site_id
				}, async: false
			}).then(res => {
				this.sayid = res.data.servicer_id
				this.servicer_id = res.data.servicer_id
				this.dialogs(1, 5, res.data.servicer_id)
				this.showTipError = false
			}).catch(err => {
				this.showTipError = true
				console.log('err=>', err)
			})

		},
		dialogs(page, page_size, servicer_id) {
			// console.log("servicer_id",servicer_id)
			this.$request.membertalkDialogs({
				servicer_id,
				page,
				page_size
			}).then(res => {
				this.mescroll.endSuccess(res.data.list.length)
				// console.log("res", res)
				if (res.data.list.length > 0) {
					if (res.data.list.length == 0) {
						return
					}
					var reslist = res.data.list.reverse()
					if (this.msglist.length > 0) {
						if (page > 1) {
							this.msglist.unshift(...reslist)
						}
					} else {
						this.msglist = reslist
					}
					this.page = page
				}
			})
				.catch(() => {
					this.mescroll.endErr()
				})

		},
		// 关闭websocket【离开这个页面的时候执行关闭】
		closeSocket() {
			this.wbc.close()
		},
		focus() { },
		inputVal(e) {
			this.keyText = e.detail.value
		},
		// 发送消息
		clickRequest() {
			var that = this
			// console.log(that.servicer_id, that.sayid)
			// console.log(that.userInfo)
			if (that.keyText == '') {
				uni.showToast({
					icon: 'none',
					title: '请输入你想说的...',
					duration: 2000
				})
				return
			}
			that.wbc.setSend(that.keyText)

			http.sendRequest({
				url: '/servicer/api/chat/say', data: {
					message: that.keyText,
					content_type: 0,
					servicer_id: that.sayid,
					sku_id: Number(that.sku_id),
					site_id: that.site_id
				}, async: false
			}).then(res => {
				if (that.servicer_id == undefined) {

					that.msglist.push({
						consumer_say: that.keyText,
						content_type: 0,
						create_day: '',
						create_time: '',
						goods_money: null,
						goods_name: null,
						goods_sku_id: 0,
						headimg: that.userInfo.headimg,
						id: null,
						logo: null,
						nickname: that.userInfo.nickname,
						order_id: null,
						order_money: null,
						order_no: null,
						order_status: null,
						order_status_name: null,
						price: null,
						read: 0,
						servicer_say: '',
						site_id: null,
						site_name: null,
						sku_image: null,
						sku_name: null,
						type: 0,
						username: null
					})
					that.keyText = ''
					// console.log(that.msglist)
				} else {
					that.keyText = ''
					that.msglist = []
					that.dialogs(1, 5, that.servicer_id)
				}
				that.scrollToBottom()
			})

		},
		seeImg(e) {
			uni.previewImage({
				urls: [e]
			})
		},
		sendOrderinfo(item) {
			var that = this
			http.sendRequest({
				url: '/servicer/api/chat/say', data: {
					content_type: 2,
					site_id: item.site_id,
					servicer_id: that.sayid,
					order_id: Number(item.order_id)
				}, async: false
			}).then(res => {
				console.log('res', res)
				if (that.servicer_id == undefined) {
					that.msglist.push({
						consumer_say: '',
						content_type: 2,
						create_day: null,
						create_time: null,
						goods_money: item.goods_money,
						goods_name: null,
						goods_sku_id: item.sku_id,
						id: item.sku_id,
						is_platform: null,
						order_id: item.order_id,
						order_money: item.price,
						order_no: item.order_no,
						order_status: null,
						order_status_name: item.delivery_status_name,
						price: item.price,
						read: 1,
						servicer_say: '',
						sku_image: item.sku_image,
						sku_name: item.sku_name,
						type: 0
					})
					console.log(that.msglist)
				} else {
					that.keyText = ''
					that.msglist = []
					that.dialogs(1, 5, that.servicer_id)
				}
				that.scrollToBottom()
			})

		},
		sendShop(goods_sku_detail) {
			console.log(goods_sku_detail)
			var that = this
			http.sendRequest({
				url: '/servicer/api/chat/say', data: {
					goods_id: goods_sku_detail.sku_id,
					content_type: 1,
					site_id: that.site_id,
					servicer_id: that.sayid,
					sku_id: Number(that.sku_id)
				}, async: false
			}).then(res => {
				if (that.servicer_id == undefined) {
					// console.log('123')
					that.msglist.push({
						consumer_say: '',
						content_type: 1,
						create_day: '',
						create_time: '',
						goods_money: null,
						goods_name: goods_sku_detail.sku_name,
						goods_sku_id: goods_sku_detail.sku_id,
						headimg: that.userInfo.headimg,
						id: goods_sku_detail.sku_id,
						logo: '',
						nickname: that.userInfo.nickname,
						order_id: null,
						order_money: null,
						order_no: null,
						order_status: null,
						order_status_name: null,
						price: goods_sku_detail.price,
						read: 1,
						servicer_say: '',
						site_id: that.site_id,
						site_name: null,
						sku_image: goods_sku_detail.sku_image,
						sku_name: goods_sku_detail.sku_name,
						type: 0,
						username: 'test'
					})
					// console.log(that.msglist)
				} else {
					that.keyText = ''
					that.msglist = []
					that.dialogs(1, 5, that.servicer_id)
				}
				that.scrollToBottom()

			})

		},
		onShow() { },
		sendImg() {
			var that = this
			// #ifdef H5
			// console.log("是否app内=>",this.isNativeApp())
			// console.log("是否安卓app内=>",this.env.includes('Android'))
			if (this.isNativeApp() && this.env.includes('Android')) {
				console.log('安卓环境')
				this.$Sdk.uploadAvatar()
				console.log('调用完this.$Sdk.uploadAvatar()')
				uni.showLoading({
					title: '请稍候'
				})
				let timer = setInterval(() => {
					console.log('进入定时器调用==>window.sendImg')
					window.sendImg = e => {
						var fileimg = e
						if (e != undefined && e != '') {
							that.wbc.setSend(fileimg)
							http.sendRequest({
								url: '/servicer/api/chat/say', data: {
									message: fileimg,
									servicer_id: that.sayid,
									sku_id: Number(that.sku_id),
									content_type: 3,
									site_id: that.site_id
								}, async: false
							}).then(res => {
								if (that.servicer_id == undefined) {
									that.msglist.push({
										consumer_say: fileimg,
										content_type: 3,
										create_day: '',
										create_time: '',
										goods_money: null,
										goods_name: null,
										goods_sku_id: 0,
										headimg: that.userInfo.headimg,
										id: null,
										logo: null,
										nickname: that.userInfo.nickname,
										order_id: 0,
										order_money: null,
										order_no: null,
										order_status: null,
										order_status_name: null,
										price: null,
										read: 1,
										servicer_say: '',
										site_id: null,
										site_name: null,
										sku_image: null,
										sku_name: null,
										type: 0,
										username: ''
									})
									console.log(that.msglist)
								} else {
									that.msglist = []
									that.dialogs(1, 5, that.servicer_id)
								}
								that.scrollToBottom()
								that.showMoreFn()
							})

							erval(timer)
							uni.hideLoading()
							console.log('拿到了清除定时器fileimg==>', fileimg)
						} else {
							uni.hideLoading()
						}
					}
				}, 400)
			} else {
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 从相册选择
					success(res) {
						uni.uploadFile({
							url: 'https://www.kanfoshan.cn/api/VideoUpload/video',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								type: 1,
								file: res.tempFilePaths[0]
							},
							success: uploadFileRes => {
								var uploadFileResimg = JSON.parse(uploadFileRes.data)
								that.wbc.setSend(uploadFileResimg.data.pic_path)

								http.sendRequest({
									url: '/servicer/api/chat/say', data: {
										message: uploadFileResimg.data.pic_path,
										servicer_id: that.sayid,
										sku_id: Number(that.sku_id),
										content_type: 3,
										site_id: that.site_id
									}, async: false
								}).then(res => {
									if (that.servicer_id == undefined) {
										that.msglist.push({
											consumer_say: uploadFileResimg.data
												.pic_path,
											content_type: 3,
											create_day: '',
											create_time: '',
											goods_money: null,
											goods_name: null,
											goods_sku_id: 0,
											headimg: that.userInfo.headimg,
											id: null,
											logo: null,
											nickname: that.userInfo.nickname,
											order_id: 0,
											order_money: null,
											order_no: null,
											order_status: null,
											order_status_name: null,
											price: null,
											read: 1,
											servicer_say: '',
											site_id: null,
											site_name: null,
											sku_image: null,
											sku_name: null,
											type: 0,
											username: ''
										})
										console.log(that.msglist)
									} else {
										that.msglist = []
										that.dialogs(1, 5, that.servicer_id)
									}
									that.scrollToBottom()
									that.showMoreFn()
								})
							}
						})
					}
				})
			}
			// #endif
			// #ifdef MP-WEIXIN
			uni.chooseImage({
				count: 1, // 默认9
				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 从相册选择
				success(res) {
					uni.uploadFile({
						url: 'https://www.kanfoshan.cn/api/VideoUpload/video',
						filePath: res.tempFilePaths[0],
						name: 'file',
						formData: {
							type: 1,
							file: res.tempFilePaths[0]
						},
						success: uploadFileRes => {
							var uploadFileResimg = JSON.parse(uploadFileRes.data)
							that.wbc.setSend(uploadFileResimg.data.pic_path)
							http.sendRequest({
								url: '/servicer/api/chat/say', data: {
									message: uploadFileResimg.data.pic_path,
									servicer_id: that.sayid,
									sku_id: Number(that.sku_id),
									content_type: 3,
									site_id: that.site_id
								}, async: false
							}).then(res => {
								if (that.servicer_id == undefined) {
									that.msglist.push({
										consumer_say: uploadFileResimg.data
											.pic_path,
										content_type: 3,
										create_day: '',
										create_time: '',
										goods_money: null,
										goods_name: null,
										goods_sku_id: 0,
										headimg: that.userInfo.headimg,
										id: null,
										logo: null,
										nickname: that.userInfo.nickname,
										order_id: 0,
										order_money: null,
										order_no: null,
										order_status: null,
										order_status_name: null,
										price: null,
										read: 1,
										servicer_say: '',
										site_id: null,
										site_name: null,
										sku_image: null,
										sku_name: null,
										type: 0,
										username: ''
									})
									console.log(that.msglist)
								} else {
									that.msglist = []
									that.dialogs(1, 5, that.servicer_id)
								}
								that.scrollToBottom()
								that.showMoreFn()
							})
						}
					})
				}
			})
			// #endif

		}
	}
}
</script>
<style lang="scss" scoped>
.tipCenter {
    width: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.textTipInfoisTiptxt {
    font-size: 20rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ff335c;
    text-align: center;
    padding-top: 20rpx;
}

image {
    width: 100%;
    height: 100%;
}

.chitchat-content {
    width: 100%;
    background: #f4f4f4;

    .chitchat-time {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
        text-align: center;
        padding-top: 40rpx;
        padding-bottom: 40rpx;
    }

    .chitchat-box {
        width: 90%;
        margin: 0 auto 20rpx auto;
        display: flex;
        align-items: center;

        .chitchat-img {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            margin-right: 20rpx;
        }

        .chitchat-imgTwo {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            margin-left: 20rpx;
        }

        .chitchat-img image {
            border-radius: 50%;
        }

        .chitchat-imgTwo image {
            border-radius: 50%;
        }

        .chitchat-text {
            width: auto;
            height: auto;
            max-width: 533rpx;
            min-width: 120rpx;
            overflow: hidden;
            word-wrap: break-word;
            word-break: normal;
            background: #fbfafa;
            border-radius: 40rpx;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #000000;
            padding: 30rpx;
            text-align: center;
            line-height: 60rpx;
        }

        .chitchat-text-Two {
            width: auto;
            height: auto;
            max-width: 533rpx;
            min-width: 96rpx;
            overflow: hidden;
            word-wrap: break-word;
            word-break: normal;
            background: #ff7124;
            border-radius: 40rpx;
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #ffffff;
            padding: 30rpx;
        }

        .chitchat-text-img {
            width: 216rpx;
            height: 216rpx;
            border-radius: 12rpx;
            padding: 24rpx;
        }

        .chitchat-text-img image {
            border-radius: 12rpx;
        }
    }

    .rightmsg {
        justify-content: flex-end;
    }
}

.scrollviewStyle {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 126rpx;
}

.bottom-box {
    position: fixed;
    bottom: 0;
    width: 749rpx;
    // height: 290rpx;
    // height: 126rpx;
    background: #ffffff;
    overflow: hidden;
    transition: all 0.2s;

    .bottom-send-box {
        width: 100%;
        padding: 24rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .input-box {
            width: 500rpx;
            height: 80rpx;
            background: #f2f0f0;
            border-radius: 40rpx;
        }

        .input-box input {
            width: 100%;
            height: 100%;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
            padding-left: 25rpx;
        }

        .face-icon {
            width: 68rpx;
            height: 68rpx;
        }

        .add-icon {
            width: 68rpx;
            height: 68rpx;
        }
    }

    .morefn {
        width: 100%;
        padding-left: 50rpx;
        padding-right: 50rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;

        .fn-one {
            .fn-one-icon {
                width: 50rpx;
                height: 50rpx;
            }

            .fn-one-text {
                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #222222;
                text-align: center;
                padding-top: 20rpx;
            }
        }
    }
}

.shop-item {
    width: 702rpx;
    height: auto;
    background: #ffffff;
    border-radius: 16rpx;
    display: flex;
    justify-content: space-around;
    line-height: 100rpx;
    margin: 30rpx auto;
    padding-top: 20rpx;
    padding-bottom: 10rpx;

    .shop-Imgs {
        width: 180rpx;
        height: 180rpx;
    }

    .shop-text {
        width: 400rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .shop-price {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .shop-price-btns {
        width: 130rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        border-radius: 25rpx;
        color: #fff;
        background-color: #ff335c;
    }
}

.btnreq {
    width: 120rpx;
    height: 56rpx;
    background: linear-gradient(90deg, #ff7124, #ff364e);
    border-radius: 28rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    line-height: 56rpx;
    margin-left: 20rpx;
}

.nameStyles {
    font-size: 20rpx;
    font-family: PingFang SC;
    font-weight: 500;
    text-align: center;
    padding-bottom: 10rpx;
}
</style>
